<template>
    <div class="personalCourse">
        <div class="courseTitle" v-if="showPurchase">
          <div class="titleButton">
            <form @submit.stop.prevent="goToCourseReferral($event)" report-submit>
              <button formType="submit" class="form-btn">
                返回首页，继续选课
              </button>
            </form>
          </div>
        </div>
        <div class="courseContent" :style="{'padding-top': showPurchase? '117rpx': '36rpx'}">
          <div class="courseCell" v-for="(item, index) in courseData" :key="index">
            <form @submit="goToDengesCourse($event, item)" report-submit>
              <button formType="submit" class="form-btn">
                <img :src="item.batch_image" lazy-load mode="aspectFill">
              </button>
            </form>
          </div>
          <div class="courseLoading" v-if='!loading'>没有更多~</div>
        </div>
    </div>
</template>

<script>
import {obtainPersonalCourse, amendUserinfo, saveStudentFormId} from '@/config/api'
import {triggerSocketWacthDadge} from "@/config/vuexUtils";
import {showMessager} from '@/config/wUtils'
export default {
  data () {
    return {
      // 用户信息数据
      userData: [],
      // 参与课程数据
      courseData: [],
      // 当前页面
      currentPage: 1,
      // 显示 购买入口
      showPurchase: false,
      // 是否加载更多
      loading: true,
    }
  },
  mounted () {
    let self = this
    // 初始化 参与的课程 界面
    self.initPersonalCourse()
  },
  methods: {
    // 初始化 参与的课程 界面
    async initPersonalCourse () {
      let self = this;
      // 当前页面
      self.currentPage = 1
      // 超级用户 标识
      if (wx.getStorageSync('super_user') === '1') {
        // 显示 购买入口
        self.showPurchase = true
      } else {
        // 显示 购买入口
        self.showPurchase = false
      }
      if (wx.getStorageSync('userInfo')) {
        // 用户信息数据
        self.userData = await wx.getStorageSync('userInfo')
        // 获取 参与的课程 数据
        self.acquirePersonalCourseData(true)

        // const curriculumInfo = await obtainPersonalCourse(self.userData.openId, self.currentPage)
        // console.log(curriculumInfo, '........curriculumInfo') 
        // if (curriculumInfo.status === 200) {
        //   // 参与课程数据
        //   self.courseData = curriculumInfo.data
        //   // if(JSON.stringify(self.courseData) !== '[]' && self.courseData.length % 10 === 0){
        //   //   // 当前页面
        //   //   self.currentPage ++
        //   // }
        // }
      }
    },
    // 获取 参与的课程 数据
    async acquirePersonalCourseData(init) {
      let self = this
      if (init) {
        // 当前页码数
        self.currentPage = 1
        // 是否加载更多
        self.loading = true
      }
      wx.showNavigationBarLoading()
      const curriculumInfo = await obtainPersonalCourse('', self.currentPage, self.userData.unionId)
      if (curriculumInfo.status === 200) {
        if (JSON.stringify(curriculumInfo.data) !== '[]') {
          if (curriculumInfo.data.length < 10 && self.currentPage > 1) {
            // 是否加载更多
            self.loading = false
          }
          if (init) {
            // 参与课程 数据
            self.courseData = curriculumInfo.data
          } else {
            // 下拉刷新，不能直接覆盖taskData 而是累加
            self.courseData = self.courseData.concat(curriculumInfo.data)
          }
        }
        console.log(self.courseData, '...self.taskData')
      }
      // console.log(taskInfo, '....精选作业')
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    // 跳转到 课程介绍
    async goToCourseReferral(e) {
        let self = this;
        wx.navigateTo({
            url: '../courseReferral/main'
        })
        // 保存用户点击的formid
        await saveStudentFormId(self.userData.openId, e.target.formId, self.userData.unionId)
    },
    // 跳转到 今日课程
    async goToDengesCourse(e, item) {
      let self = this;
      console.log(item, self.userData.openId, e, '跳转到 今日课程')
      triggerSocketWacthDadge();
      // 保存用户点击的formid
      await saveStudentFormId(self.userData.openId, e.target.formId, self.userData.unionId)
      // 引导状态
      const guideState = wx.getStorageSync('guide_state')
      // if (guideState) {
      //   console.log('....guideState.......', guideState)
      // }
      // console.log(guideState, '...guideState')
      const personalState = await amendUserinfo(self.userData.openId, item.batch_id, item.student_id, guideState, self.userData.unionId)
      console.log(personalState, '...personalState')
      if (personalState.status === 200) {
        wx.setStorageSync('student_id', item.student_id)
        wx.setStorageSync('batch_id', item.batch_id)
        wx.setStorageSync('super_user', personalState.data.super_user)  
        wx.setStorageSync('plan_state', 1)  
        wx.switchTab({
          url: '../dengesCourse/main'
        })
      }
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // // 当前页面
    // self.currentPage = 1
    // // 初始化 参与的课程 界面
    // self.initPersonalCourse()
    // wx.stopPullDownRefresh()
    // 初始化 参与的课程 界面
    self.initPersonalCourse()
  },
  // 上拉加载
  onReachBottom () {
    let self = this;
    // // console.log(self.currentPage, self.problemData.length / 10 === self.currentPage)
    // if(self.courseData.length % 10 === 0){
    //   // 初始化 参与的课程 界面
    //   self.initPersonalCourse()
    // }else{
    //   showMessager('没有更多~')
    // }
    console.log('上拉加载')
    // 是否加载更多
    if (!self.loading) {
      // 没有更多了
      return false;
    } else {
      // 当前页码数
      self.currentPage = self.currentPage + 1
      // 获取 参与的课程 数据
      self.acquirePersonalCourseData()
    }
  }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.personalCourse {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
  .courseTitle{
    width: 100%;
    height: 100rpx;
    position: fixed;
    top: 0;
    .titleButton{
      background-image: linear-gradient(90deg, #FFB497 0%, #FE7A72 100%);
      border-radius: 8rpx;
      width: 261rpx;
      height: 57rpx;
      line-height: 57rpx;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #FFFFFF;
      letter-spacing: 0.66px;
      margin: 30rpx auto;
      text-align: center;
      form {
        margin: 0 auto;
        .form-btn {
            border:none;
            // text-align:left;
            padding:0;
            margin:0;
            background-color: transparent;
            font-family: PingFangSC-Regular;
            font-size: 24rpx;
            color: #FFFFFF;
            letter-spacing: 0.66px;
            margin: 30rpx auto;
            text-align: center;
            &::after {
                border: none;
            }
        }
      }
    }
  }
  .courseContent{
    width: 100%;
    .courseCell{
      width: 686rpx;
      height: 264rpx;
      background: #999;
      margin: 0 auto;
      margin-bottom: 30rpx;
      border-radius: 10rpx;
      overflow: hidden;
      form {
        margin: 0 auto;
        .form-btn {
            border:none;
            text-align:left;
            padding:0;
            margin:0;
            background-color: transparent;
            &::after {
                border: none;
            }
        }
      }
      img{
          // width: 100%;
          // height: 100%;
        width: 686rpx;
        height: 264rpx;
      }
    }
  }
  .courseLoading{
    width:100%;
    text-align:center;
    font-family:PingFangSC-Regular;
    font-size:26rpx;
    color:#999999;
    letter-spacing:0.7rpx;
    line-height:1;
    margin-top:-1rpx;
    padding-bottom:30rpx;
    padding-top: 13rpx;
    background-color: #fff;
  }
  
}
</style>
